<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			ul{
				width: 300px;
				list-style: none;
				background: skyblue;
				padding: 0;
			}
			
			li{
				width: 100%;
				text-align: center;
				background: pink;
				margin: 2px auto;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<script>
			var ul = document.querySelector('ul');
			var lis = ul.getElementsByTagName('li');
			for ( var i = 0; i < lis.length; i++ ){
				lis[i].setAttribute('id',i);
			}
			ul.addEventListener('click', function ( e ) {
				for ( var i = 0; i < lis.length; i++ ) {
					if (e.target.id == i){
						console.log(i+1);
					}
				}
			});
		</script>
	</body>
</html>
